<template>
    <div class="imgAndHello">
        <div class="HelloDiv">
            <div class="largeFontDiv ">你好，管理员，开始新一天的工作吧</div>
            <div class="fontPosition fontPosition">今日晴，0℃ - 10℃，天气寒冷，注意添加衣物。</div>
            <div class="fontPosition fontPosition">
                <el-icon>
                    <UserFilled/>
                </el-icon> &nbsp;
                <span>总用户数量（{{teacherAndUserSumNum}}）</span>
                <span>教师数量（{{teacherNum}}）</span>
                <span>学生数量（{{userNum}}）</span>
            </div>
        </div>
        <div class="imgDiv">
            <img src="../../assets/adminImg.png" class="picture">
        </div>
    </div>
    <div class="piePicture">
        <div class="titleDiv">
            <span class="textDiv">数据统计</span>
            <el-divider/>
        </div>
        <div class="pieDiv">
            <div id="NumPie">

            </div>
            <div id="vipNumPie">

            </div>
            <div id="courseNumPie">

            </div>
        </div>
    </div>
</template>

<script setup>
    import {
        UserFilled
    } from '@element-plus/icons-vue'
    import {ref, onMounted, computed, onBeforeMount} from 'vue'
    import {userCount, userOrdinaryCount, userVipCount,teacherCount,teacherOrdinaryCount,teacherVipCount} from "@/api/user";
    import * as echarts from 'echarts';
    import {courseOrdinaryCount, courseVipCount} from "@/api/course";

    let teacherNum = ref();
    let userNum = ref();
    const userOrdinaryNum = ref();
    const userVipNum = ref();
    const teacherVipNum = ref();
    const teacherOrdinaryNum = ref();
    const courseOrdinaryNum = ref();
    const courseVipNum = ref();

    onBeforeMount(async () => {
        await teacherAndUserCount();
        drawNumPiePicture();
        drawVipNumPiePicture();
        drawCourseNumPie();
    });

    const teacherAndUserCount = async () => {
        const teacherRes = await teacherCount();
        const userRes = await userCount();
        const userOrdinaryRes = await userOrdinaryCount();
        const userVipRes = await userVipCount();
        const teacherOrdinaryRes = await teacherOrdinaryCount();
        const teacherVipRes = await teacherVipCount();
        const courseOrdinaryRes = await courseOrdinaryCount();
        const courseVipRes = await courseVipCount();
        userOrdinaryNum.value = userOrdinaryRes.data;
        userVipNum.value = userVipRes.data;
        teacherOrdinaryNum.value = teacherOrdinaryRes.data;
        teacherVipNum.value = teacherVipRes.data;
        teacherNum.value = teacherRes.data;
        userNum.value = userRes.data;
        courseOrdinaryNum.value = courseOrdinaryRes.data;
        courseVipNum.value = courseVipRes.data;
    };
    const teacherAndUserSumNum = computed(() => {
        return teacherNum.value + userNum.value
    })


    const drawNumPiePicture = () => {
        let chartDom = document.getElementById('NumPie');
        let myChart = echarts.init(chartDom);
        let option;
        option = {
            title: {
                text: '用户构成',
                subtext: '教师 学生',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '用户数量',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: teacherNum.value, name: '教师'},
                        {value: userNum.value, name: '学生'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }

    const drawVipNumPiePicture = () => {
        let chartDom = document.getElementById('vipNumPie');
        let myChart = echarts.init(chartDom);
        let option;
        option = {
            title: {
                text: '会员统计',
                subtext: '教师 学生',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '用户数量',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: teacherVipNum.value, name: '会员教师'},
                        {value: teacherOrdinaryNum.value, name: '普通教师'},
                        {value: userVipNum.value, name: '会员学生'},
                        {value: userOrdinaryNum.value, name: '普通学生'},
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }

    const drawCourseNumPie = () => {
        let chartDom = document.getElementById('courseNumPie');
        let myChart = echarts.init(chartDom);
        let option;
        option = {
            title: {
                text: '课程统计',
                subtext: '精品 普通',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            series: [
                {
                    name: '课程数量',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        {value: courseVipNum.value, name: '精品课程'},
                        {value: courseOrdinaryNum.value, name: '普通课程'},

                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        option && myChart.setOption(option);
    }


</script>

<style scoped>
    .imgAndHello {
        background-color: white;
        height: 18rem;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .HelloDiv {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .largeFontDiv {
        font-size: 25px;

    }

    .picture {
        height: 500px;
        width: 550px;
        margin-top: 28px;
    }

    .fontPosition {
        padding-top: 40px;
    }

    .piePicture {
        margin-top: 20px;
        background-color: white;
        height: 25rem;
        position: relative;
    }

    .titleDiv {
        position: absolute;
        left: 20px;
        top: 25px;
        width: 95%;
    }

    .textDiv {
        position: absolute;
        left: 10px;
        top: -10px;
    }

    #NumPie {
        padding-left: 60px;
        padding-top: 80px;
        width: 400px;
        height: 400px;
    }

    #vipNumPie {
        /*padding-left: 150px;*/
        padding-top: 80px;
        width: 400px;
        height: 400px;
    }
    #courseNumPie{
        padding-top: 80px;
        width: 400px;
        height: 400px;
    }
    .pieDiv{
        display: flex;
    }

</style>